<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Puzzle</title>
  <style>
    .puzzle-table, .puzzle-table td, .preview table, .preview td {border: 1px solid #ccc; border-collapse: collapse}
    .puzzle-table td { width: 80px; height: 80px; line-height: 80px; text-align: center; font-size: x-large}
    .preview td {width: 24px; height: 24px; line-height: 24px; font-size: initial}
    .preview {vertical-align: top;}
    .default {cursor: default}
    .active { cursor: pointer}
    .active:hover {background-color: lightcyan}
    .scoreboard {font-size: x-large; vertical-align: top}
    #steps {display: inline-block; padding:0 10px; }
    #container {padding-right: 20px;}
    .button-panel {vertical-align: bottom}
    .button {
        display: block;
        text-align: center;
        padding: 9px;
        background-color: darkcyan;
        color: white;
        cursor: pointer;
    }
    .button.disabled {cursor: default; background-color: #666; color: #999;}
  </style>
    <script type="text/javascript" src="../../lib/games/puzzle/puzzle.js"></script>
</head>
<body>
<table>
    <tr>
        <td id="container" rowspan="3"></td>
        <td class="preview" id="preview">
            Preview: <br/>
        </td>
    </tr>
    <tr>
        <td class="scoreboard">
            步数: <span id="steps">0</span>
        </td>
    </tr>
    <tr>
        <td class="button-panel">
            <select id="phase" style="padding: 5px 10px;">
                <option value="3">3</option>
                <option value="4" selected>4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
            </select>&nbsp;
            阶
            <br/><br/>
            <a class="button">Create</a>
        </td>
    </tr>
</table>
<script type="text/javascript">
document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        let steps = document.getElementById ('steps'), button = document.querySelector ('.button'),
            phase = document.getElementById ('phase'),
            options = {
                parent: 'container',
                preview: 'preview',
                dimension: parseInt (phase.value, 10),
                onstep : function (score) {
                    steps.innerText = score;
                },
                onsuccess: function () {
                    button.classList.remove ('disabled');
                    phase.classList.remove ('disable');
                }
            };
        phase.onchange = function (e) {
            console.log (e);
            console.log ('value = ' + this.value);
            console.log (this.options [this.selectedIndex].value);
            options.dimension = parseInt (this.value, 10);
            start_game ();
        }

        function start_game () {
            button.classList.add ('disabled');
            phase.classList.add ('disabled');
            steps.innerText = '0';
            Puzzle.init (options);
        }

        button.onclick = function () {
            if (this.classList.contains ('disabled')) {
                return;
            }

            start_game ();
        }

        start_game ();
    }
}
</script>
</body>
</html>